<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        fieldset{
            width: 500px;
            margin: 150px auto;
            border: 0px;
            padding: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <fieldset>
        <legend>忘记密码</legend>
        <el-form :model="update" status-icon :rules="rules" ref="update" label-width="100px" class="demo-ruleForm">
            <el-form-item label="手机号" prop="telephone">
                <el-input  v-model="update.telephone" ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input  v-model="update.code" >
                    <el-button slot="append" @click="sendCode()" id="foo">发送验证码</el-button>
                </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input  v-model="update.password" type="success" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updatePassword()">提交</el-button>
                <el-button @click="resetForm('info')">重置</el-button>
            </el-form-item>
        </el-form>
    </fieldset>
</div>
<script>
    var haha=new Vue({
        el:"#app",
        data(){
            var checkMobile = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("手机号不可为空"));
                } else {
                    if (value !== "") {
                        var reg = /^1[3-9]\d{9}$/;
                        if (!reg.test(value)) {
                            callback(new Error("请输入有效的手机号码"));
                        }
                    }
                    callback();
                }
            };

            return {
                rules: {
                    telephone: [
                        { required: true, message: "请输入手机号", trigger: "blur" },
                        {
                            validator: checkMobile,
                            min: 11,
                            max: 11,
                            message: "手机号格式错误",
                            trigger: "blur",
                        },
                    ],
                    password: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                },
                update:{},
            }
        },
        methods:{
            sendCode(){
                foo.disabled="disabled";
                var i=59;
                var t=setInterval(function () {
                    foo.innerHTML="正在发送("+i+"s)";
                    i--;
                    if(i==0){
                        foo.innerHTML="发送验证码";
                        foo.disabled="";
                        clearInterval(t);
                    }
                },1000);

                $.get("/demo/user/sendCode?telephone="+haha.update.telephone,function (backData) {

                })
            },
            updatePassword(){
                $.post("/demo/user/updatePassword?",haha.update,function (backData) {
                    if(backData.code==0){
                        alert(
                            haha.update=backData.msg
                        )
                    }else if(backData.code==1){
                        haha.$message.success(backData.msg);
                        window.location.href="/demo/userr/userLogin.html"
                    }
                })
            },
            resetForm(formName) {
                haha.$refs[formName].resetFields();
            }
        }

    });
</script>
</body>
</html>